.li-hot-balloon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  &.moving {
    .balloon {
      animation: moving-balloon 2s ease infinite;
    }
    .basket {
      animation: moving-basket 2s ease infinite;
    }
    .cloud {
      animation: moving-cloud 2s ease infinite;
    }
  }

  .hot-balloon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.36, 0.36);
  }

  .ball-box {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 50%);

    .balloon {
      width: 130rpx;
      height: 130rpx;
      background-color: #755ffb;
      border-radius: 50%;
      border: 4rpx solid #d7e7ea;
      position: absolute;
      left: 50%;
      top: 0rpx;
      transform: translate(-50%);
    }
    .balloon::after {
      width: 50rpx;
      height: 0;
      border-top: 50rpx solid #755ffb;
      border-left: 30rpx solid transparent;
      border-right: 30rpx solid transparent;
      content: '';
      position: absolute;
      top: 100rpx;
      left: 50%;
      transform: translate(-50%);
    }

    .balloon::before {
      width: 70rpx;
      height: 12rpx;
      background-color: #755ffb;
      border-radius: 5rpx;
      content: '';
      position: absolute;
      left: 50%;
      top: 150rpx;
      transform: translate(-50%);
    }

    .basket {
      width: 40rpx;
      height: 30rpx;
      background: #d1c1a6;
      border-radius: 0 0 3rpx 3rpx;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 210rpx;
    }

    .basket:before {
      width: 50rpx;
      height: 10rpx;
      background: #b2a082;
      border-radius: 3rpx;
      content: '';
      position: absolute;
      top: -10rpx;
      left: 50%;
      transform: translate(-50%);
    }

    .basket:after {
      width: 24rpx;
      height: 34rpx;
      border-left: 2rpx solid #b2a082;
      border-right: 2rpx solid #b2a082;
      content: '';
      position: absolute;
      top: -40rpx;
      left: 50%;
      transform: translate(-50%) perspective(50px) rotateX(-40deg);
    }
  }
  .cloud-box {
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 0;
    width: 140rpx;
    height: 200rpx;

    .cloud {
      width: 140rpx;
      height: 40rpx;
      background: white;
      border-radius: 40rpx;
      position: absolute;
      top: -20rpx;
      right: 0rpx;
      z-index: 99;
    }

    .cloud::before {
      width: 60rpx;
      height: 60rpx;
      background: white;
      border-radius: 50%;
      content: '';
      position: absolute;
      top: -40rpx;
      left: 20rpx;
      z-index: 99;
    }

    .cloud::after {
      width: 60rpx;
      height: 60rpx;
      background: white;
      border-radius: 50%;
      content: '';
      position: absolute;
      top: -30rpx;
      right: 24rpx;
      z-index: 99;
    }
  }
}

@keyframes moving-balloon {
  0% {
    transform: translate(-50%);
  }
  50% {
    transform: translate(-50%, -10%);
  }
}

@keyframes moving-basket {
  0% {
    transform: translate(-50%);
  }
  50% {
    transform: translate(-50%, -40%);
  }
}

@keyframes moving-cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10%);
  }
}
